<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8">
	<title>v-if&v-else&v-show实例</title>
	<!-- 引入样式 element -->
	<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">

	<style type="text/css">
		.table {
			background-color: pink;
			width: 100%;
			height: 100%;
		}

		.img {
			width: 30%;
			height: 30%;
		}
	</style>

</head>

<body>
	<h1>v-if&v-else&v-show实例</h1>
	<hr>
	<div id="app">
		<p>v-if： 判断是否加载，可以减轻服务器的压力，在需要时加载。</p>
		<p>v-show：调整css dispaly属性，可以使客户端操作更加流畅。</p>
		<div v-if="isLogin">您好</div>
		<div v-else>请登录！</div>
		<hr>
		<div v-show="isLogin">大家好</div>

		<div v-if="check(1)">sadasdasdas</div>

		<hr>
		<!-- <div class="table">
			<table>
				<tr v-for="(item, i) in list_two">
					<td v-for="(val, k) in list_field">
						<div v-if="!check(item, val)">{{item[val]}}</div>
						<div v-else>
							<span v-for="(value, key) in item[val]">
								<img class="img" :src="value">
							</span>
						</div>
						
					</td>
				</tr>
			</table>
		</div> -->
		<hr>

		<el-table :data="list"  border style="width: 100%">
			<div v-for="(val, k) in list_field">
				<el-table-column :prop="val" :label="label[val]" width="180">
					<template scope="scope">
						<div v-if="!check(scope.row, val)">
							<span>{{scope.row[val]}}</span>
						</div>
						<div v-else>
							<!-- <span v-for="(value, key) in scope.row[val]">
								<img class="img" :src="value">
							</span> -->
							<span v-for="item in scope.row[val]">
		                        <el-popover placement="left" title="" trigger="click" width="1000">
		                            <img @click="rotate" :style="{transform:'rotateZ('+ deg +'deg)'}" :src="item" />              
		                            <img slot="reference" :src="item" :alt="item" style="width: 40px;height: 40px" class="head_pic"/>
		                        </el-popover>
		                    </span>
						</div>
					</template>
				</el-table-column>	
			</div>
        </el-table>
	</div>

</body>
<!-- 引入组件库 -->
<!-- <script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script type="text/javascript" src="../assets/js/vue.js"></script>
<script type="text/javascript" src="../assets/js/jquery-3.1.1.min.js"></script> -->

<!-- <script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script> -->

<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js"></script>
<!-- import Vue before Element -->
<script src="https://unpkg.com/vue/dist/vue.js"></script>
<!-- import JavaScript -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>

<script type="text/javascript">
	var app = new Vue({
		el: '#app',
		data: {
			isLogin: true,
			list: [],
			list_two:[],
			file_field: [],
			list_field: [],
			label: [],
			deg: 0
		},
		methods: {
			add: function () {
				console.log(this.list)
			},
			rotate(){
                this.deg += 90;
                if(this.deg >= 360){
                    this.deg = 0
                }
            },
			check: function (item, val) {
				// Array.isArray(a)
				// console.log(item[val], typeof item[val])
				// console.log(item[val], Array.isArray(item[val]))
				if (Array.isArray(item[val])) {
					return true
				}
				return false
			},
			init: function () {
				// console.log('init');
				var url = 'http://yinanapi.sdxxtop.com/api/collect/formdata';
				var data = 'eyJ2IjoiMTAwMDAiLCJwaSI6IjEiLCJ1aSI6IjUzIiwiZWkiOiI1OCIsInB0aSI6IjIiLCJmaSI6IjgiLCJvciI6IjEiLCJkaSI6IjEzIiwidHMiOjE1NzExMTA3MDUsInNuIjoiNDI4MzJGRTIwNEYwNzg5NEY1OUM1ODk5OEY1NkQwNjMifQ==';
				// 解决ajax里面不能用this
				var that = this
				jQuery.ajax({
					url: url,
					data: { data: data },
					dataType: 'json',
					// jsonpCallback: 'jsonpCallback'
					type: 'post',
					success: function (msg) {
						if (msg.code == '200') {
							that.list = msg.data.list
							that.list_two = msg.data.list
							that.file_field = msg.data.file_field
							that.list_field = msg.data.list_field
							that.label = that.list.shift()
						} else {
							alert(msg.msg);
						}

					},
					error: function (msg) {
						// alert(msg.responseJSON.msg);
						alert('服务器开小差。。。');
					}
				})
			}
		},
		created: function () {
			this.init()
		},
		updated:function(){
			
			console.log('6-updated 被更新后');
		},
	})


</script>

</html>